{{ header }}
<div id="account-order" class="container">
	{#{{ include(helper.template('_partial/breadcrumb')) }}#}
	<div class="row no-gutters">{{ column_left }}
		{% if column_left and column_right %}
			{% set class = 'col-sm-6' %}
		{% elseif column_left or column_right %}
			{% set class = 'col-sm-9' %}
		{% else %}
			{% set class = 'col-sm-12' %}
		{% endif %}
		<div id="content" class="{{ class }}">{{ content_top }}

			{# 操作订单成功/失败信息 #}
			{% for error in helper.sessionPull('error_tips') %}
				<div class="alert alert-danger alert-dismissible">
					<i class="fa fa-exclamation-circle"></i> {{ error }}
					<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				</div>
			{% endfor %}
			{% for success in helper.sessionPull('success_tips') %}
				<div class="alert alert-success alert-dismissible">
					<i class="fa fa-exclamation-circle"></i> {{ success }}
					<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				</div>
			{% endfor %}

			{#<h1>{{ heading_title }}</h1>#}
			{% if order_total %}
				<div class="account-order-types">
					{% for status_button in status_buttons %}
						<a class="btn  {{ status_button.active ? 'active': '' }}" href="{{ status_button.action }}">{{ status_button.name }}</a>
					{% endfor %}
				</div>
			{% endif %}
			{% if orders %}
				<div class="table-responsive">
					<table class="table table-bordered order-lists">
						<thead>
						<tr>
							<td class="text-center">{{ column_product }}</td>
							<td class="text-center">{{ column_quantity }}</td>
							<td class="text-center">{{ column_date_added }}</td>
							<td class="text-center">{{ column_order_id }}</td>
							<td class="text-center">{{ column_total }}</td>
							<td class="text-center">{{ column_status }}</td>
							<td class="text-center">{{ column_action }}</td>
						</tr>
						</thead>
						<tbody>
						{% for order in orders %}
							<tr class="blank-tr"></tr>
							{% for order_product in order.order_products %}
								{% set rowspan = loop.length %}
								<tr>
									<td class="text-center no-border-right">
										<div class="order-product-container">
											<div class="product-image">
												<a href="{{ order_product.link }}" target="_blank">
													<img src="{{ helper.image_resize(order_product.image) }}" alt="">
												</a>
											</div>

											<div class="product-name">
												<a href="{{ order_product.link }}" target="_blank">
													{{ order_product.name }}
												</a>
											</div>
										</div>
									</td>
									<td class="text-center no-border-right">{{ order_product.quantity }}</td>
									<td class="text-center">{{ order.date_added }}</td>
									{% if loop.first %}
										<td class="text-center" rowspan="{{ rowspan }}">#{{ order.order_id }}</td>
										<td class="text-center order-price" rowspan="{{ rowspan }}">{{ order.total }}</td>
										<td class="text-center" rowspan="{{ rowspan }}">
											<p>{{ order.status }}</p>
											<p class="order-detail-view">
												<a href="{{ order.view }}" title="{{ text_order_detail }}">{{ text_order_detail }}</a>
											</p>
											{% if order.logistic_action %}
												<p class="order-express-view">
													<a href="{{ order.logistic_action }}" title="{{ view_express }}">{{ view_express }}</a>
												</p>
											{% endif %}
										</td>
										<td class="text-center" rowspan="{{ rowspan }}">
											{% if order.operate_actions.pay %}

												<a href="{{ order.operate_actions.pay }}" title="{{ pay_now }}" class="order-btn pay-now">{{ pay_now }}</a>

												<p class="cancel-btn"><a href="{{ order.operate_actions.cancel }}" title="{{ cancel }}">{{ cancel }}</a></p>

											{% elseif order.operate_actions.confirm_receipt %}
												<a href="{{ order.operate_actions.confirm_receipt }}" title="{{ confirm_sign }}" class="order-btn sign-btn">{{ confirm_sign }}</a>
											{% else %}
												-
											{% endif %}
										</td>
									{% endif %}
								</tr>
							{% endfor %}
						{% endfor %}
						</tbody>
					</table>
				</div>
				<div class="row">
					<div class="col-sm-12 text-center">{{ pagination }}</div>
				</div>
			{% else %}
				<div class="no-items">
					<img src="catalog/view/theme/default/image/icon/icon_no_order.svg" class="img-responsive">
					<span>{{ text_no_results }}</span>
				</div>
			{% endif %}
			{{ content_bottom }}</div>
		{{ column_right }}</div>
</div>
{{ footer }}
<script>

    $(document).ready(function($){
        $('.cancel-btn > a').click(function(e){
            e.preventDefault();

            var $element = $(this);
            var redirectButtonLocation = $element.attr('href');
            var content = "<p class='text-center'>{{ warn_cancel }}</p>";
            var redirectButtonText = '{{ button_yes }}';

            layer.open({
                skin: 'layer-alert',
                title: ' ',
                btnAlign: 'c',
                shadeClose: true,
                content: content,
                btn: [redirectButtonText],
                yes: function() {
                    window.location = redirectButtonLocation;
                }
            });
        });
        $('.order-btn.sign-btn').click(function(e){
            e.preventDefault();

            var $element = $(this);
            var redirectButtonLocation = $element.attr('href');
            var content = "<p class='text-left'>{{ warn_confirm }}</p>";
            var redirectButtonText = '{{ yes }}';

            layer.open({
                skin: 'layer-alert',
                title: ' ',
                btnAlign: 'c',
                shadeClose: true,
                content: content,
                btn: [redirectButtonText],
                yes: function() {
                    window.location = redirectButtonLocation;
                }
            });
        })
    })
</script>
